<template>
  <div class="mod-config">
    <basic-container>
      <navigationHeTong
        :sign="{ a: false, b: true, c: false, d: false, e: false, f: false }"
      ></navigationHeTong>
      <div v-if="showH == 2" class="boxsty zhiBiao">
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <contractDetailHeader
              :contractDetailHeaderData="htmsg"
            ></contractDetailHeader>
          </div>
          <div v-show="searchadvanced">
            <div class="flex">
              <div>
                <el-form :model="form" :inline="true" class="form-inline">
                  <el-form-item label="受约人姓名">
                    <el-input
                      v-model="form.shouyueName"
                      placeholder="受约人姓名"
                      style="width: 160px"
                      :clearable="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="受约人岗位">
                    <el-input
                      v-model="form.shouyueZhiwu"
                      placeholder="受约人岗位"
                      style="width: 160px"
                      :clearable="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      icon="el-icon-search"
                      type="primary"
                      class="marginLeft"
                      @click="getDataList"
                      >检索</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
        <div style="border-top: 1px solid #b0bde2">
          <div class="mt10">
            <div style="float: right; margin-bottom: 10px">
              <el-button type="primary" plain @click="okAll">同意</el-button>
              <el-button type="primary" plain @click="backAll">驳回</el-button>
              <el-button type="primary" plain @click="fanHu">返回</el-button>
              <el-button plain type="primary" @click="exportExcel"
                >导出</el-button
              >
            </div>
          </div>
        </div>
        <el-table
          :data="dataList"
          v-loading="loading"
          border
          style="width: 100%; margin-top: 20px"
          height="60vh"
          ref="tableRef"
        >
          <el-table-column
            type="selection"
            width="55"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            width="80"
            header-align="center"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column
            prop="zhibiaoType"
            label="指标类别"
            min-width="90"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="zhibiaoName"
            label="指标名称"
            min-width="120"
            show-overflow-tooltip
            header-align="center"
            align="left"
          >
          </el-table-column>
          <el-table-column
            prop="weight"
            label="权重(%)"
            min-width="120"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="formulaId"
            label="计算公式"
            min-width="180"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.edit">
                <el-select
                  v-model="scope.row.formulaId"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option
                    v-for="item in formulaOptions"
                    :key="item.id"
                    :label="item.gsMc"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </span>
              <span v-else>{{ scope.row.formula }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="targetValue"
            label="目标值"
            min-width="120"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="unit"
            label="单位"
            min-width="120"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="shangnianvalue"
            label="上年度完成值"
            min-width="120"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="increaseDecrease"
            label="增减幅度"
            min-width="90"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="targetValueType"
            label="完成值获取方式"
            min-width="180"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.targetValueType"
                size="mini"
                v-if="scope.row.edit"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span v-else>{{ typeList[scope.row.targetValueType].name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="dataProviderId"
            label="数据提供部门/人"
            min-width="180"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-select
                v-if="scope.row.edit"
                v-model="scope.row.dataProviderNameSelect"
                placeholder=""
                filterable
                @change="
                  handleProviderChange(scope.row, scope.row.tgLx, scope.$index)
                "
              >
                <el-option
                  v-for="(item, index) in scope.row.providerList"
                  :label="item.label"
                  :value="item.val"
                  :key="index"
                ></el-option>
              </el-select>
              <span v-else>{{ scope.row.dataProviderNameSelect }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="auditStatus"
            label="状态"
            min-width="120"
            header-align="center"
            align="center"
            :formatter="auditStatusFormater"
          >
          </el-table-column>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
      <hetongcjTable
        class="boxsty zhiBiao"
        v-if="showH == 1"
        @hetongcjC="hetongcjC"
        :hetongzhibiaoTable="hetongzhibiaoTable"
      ></hetongcjTable>
    </basic-container>
  </div>
</template>

<script>
import {
  getListByzbnd2,
  okApi,
  okAllApi,
  backApi,
  backAllApi,
  getFormula,
  getDataProvider,
} from "@/api/hetongrenwu/hetongyeji/hetongzb";
import { radioTwoList } from "@/api/hetongrenwu/hetonghtxxdjb";
import { validatenull } from "@/util/validate";
import hetongcjTable from "@/views/hetongrenwu/components/hetongcj-table";
import { jgtbExportExcel } from "@/api/hetongrenwu/hetongjgtb";
import contractDetailHeader from "@/views/hetongrenwu/components/contractDetailHeader";

export default {
  components: {
    hetongcjTable,
    contractDetailHeader,
  },
  props: {
    zbndData: {},
  },
  data() {
    return {
      tianBaoTable: {},
      ids: [],
      id: "",
      zhiShow: 1,
      form: {},
      radio: "1",
      radioTwo: "-1",
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      searchadvanced: true,
      searchheight: "0",
      radioTwoList: radioTwoList,
      loading: false,
      showH: 1,
      hetongId: Number,
      hetongzhibiaoTable: {
        lastPage: "zbsh",
        showSearch: true,
        pageTitle: "业绩合同",
        showBackBtn: false,
      },
      shows: true,
      streamId: Number,
      taskId: Number,
      programInterface: "",
      typeList: [
        { name: "手工填报", value: "0" },
        { name: "自动获取", value: "1" },
      ],
      contractName: "",
      htmsg: {},
      ndUserId: "",
      formulaOptions: [],
    };
  },
  created() {
    let params = this.$route.query;
    if (!validatenull(params)) {
      this.radioTwo = params.radioTwo;
    }
    this.getDataList();
    this.getXiaLa();
  },
  watch: {
    radio(value) {
      if (value) {
        this.getDataList();
      }
    },
    radioTwo(value) {
      if (value) {
        this.getDataList();
      }
    },
    zbndData: {
      handler(newVal, oldVal) {
        //console.log(newVal);
        if (newVal) {
          this.showH = 2;
          this.hetongId = newVal.row.bussinessKey;
          this.streamId = newVal.row.streamId;
          this.programInterface = newVal.row.programInterface;
          this.taskId = newVal.row.taskId;
          this.shows = newVal.shows;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //返回到合同创建页面
    fanHu() {
      if (this.shows == true) {
        this.showH = 1;
        this.getDataList();
      } else {
        this.$emit("ZbndChildren", true);
      }
    },
    getXiaLa() {
      getFormula().then((res) => {
        this.formulaOptions = res.data.data;
      });
      getDataProvider().then((res) => {
        if (res.data.data) {
          this.providerList = res.data.data;
          this.dataListLoading = false;
        }
      });
    },
    //从合同创建跳转过来执行的方法
    hetongcjC(data) {
      console.log(JSON.stringify(data));
      console.log("this.showH1" + this.showH);
      if (data) {
        this.showH = 2;
        this.hetongId = data.htId;
        this.streamId = data.streamId;
        this.programInterface = data.programInterface;
        this.taskId = data.taskId;
        this.id = data.id;
        this.tgLx = data.tgLx;
        this.ndUserId = data.ndUserId;
        this.contractName = data.contractName;
        this.getDataList();
        this.htmsg = data;
      }
      console.log("this.showH2" + this.showH);
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    //搜索
    search() {
      this.getDataList();
    },
    //导出
    exportExcel() {
      var ids = [];
      ids.push(this.hetongId);
      var filename = "";
      if (ids.length > 1) {
        filename = "业绩合同指标审核.zip";
      } else {
        filename = this.contractName + "指标明细表" + ".xlsx";
      }
      jgtbExportExcel({
        ids: ids,
        type: "zbfm",
        ndid: this.id,
      }).then((response) => {
        this.$message.closeAll();
        this.$message.success("导出成功!");
        let url = window.URL.createObjectURL(new Blob([response.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", filename);
        document.body.appendChild(link);
        link.click();
      });
    },
    //重组dataList
    resetDataList() {
      console.log("resetDataList:" + 1 + this.dataList);
      console.log(this.dataList);
      this.dataList = this.dataList.map((item) => {
        item.providerList = [];
        item.tgLx = (item.tgLx ? item.tgLx : this.tgLx) || "1";
        //tgLx等于1是机构，2是个人
        if (item.tgLx == "2") {
          item.dataProviderIdSelect = item.targetUserId;
          item.dataProviderNameSelect = item.targetUserName;
        } else {
          item.dataProviderIdSelect = item.dataProviderId;
          item.dataProviderNameSelect = item.dataProvider;
        }
        if (item.targetUserId) {
          item.providerList.push({
            val: item.targetUserId,
            label: item.targetUserName,
          });
        }
        if (item.dataProviderId) {
          item.providerList.push({
            val: item.dataProviderId,
            label: item.dataProvider,
          });
        }
        console.log(2);
        return item;
      });
      console.log(3);
      //console.log(this.dataList);
    },
    //更改数据提供部门
    handleProviderChange(row, tgLx, index) {
      this.dataList[index].tgLx = tgLx == "1" ? "2" : "1";
    },
    //获取指标列表
    getDataList() {
      this.loading = true;
      var params = {
        htId: this.hetongId,
        ndId: this.id,
        targetUserId: this.ndUserId,
        str: 2,
      };
      getListByzbnd2(params)
        .then((response) => {
          this.dataList = response.data.data;
          this.resetDataList();
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    ok(id) {
      this.$confirm("是否要通过该指标?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          okApi(id)
            .then((res) => {
              this.$message.closeAll();
              this.$message({
                type: "success",
                message: "提交成功!",
              });
              this.getDataList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "提交失败!",
              });
              this.getDataList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    back(id) {
      this.$confirm("是否要驳回该指标?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          backApi(id)
            .then((res) => {
              this.$message({
                type: "success",
                message: "驳回成功!",
              });
              this.getDataList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "提交失败!",
              });
              this.getDataList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    //批量通过
    okAll() {
      var rows = this.$refs.tableRef.selection;
      if (rows.length == 0) {
        rows = this.$refs.tableRef.data;
      }
      this.$confirm("是否要通过指标?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          const params = {
            rows: rows,
            taskId: this.taskId,
          };
          okAllApi(params)
            .then((res) => {
              this.$message.closeAll();
              this.$message({
                type: "info",
                message: res.data.data + "条指标已处理",
              });
              this.loading = false;
              if (this.shows == true) {
                this.showH = 1;
              } else {
                this.$emit("ZbndChildren", true);
              }
              this.getDataList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "提交失败!",
              });
              this.getDataList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    backAll() {
      var rows = this.$refs.tableRef.selection;
      if (rows.length > 0) {
        for (var i = 0; i < rows.length; i++) {
          rows[i].auditStatus = 1;
        }
      } else {
        rows = this.$refs.tableRef.data;
      }
      this.$confirm("是否要驳回指标?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = {
            rows: rows,
            taskId: this.taskId,
            formName: "zbsh",
          };
          this.loading = true;
          backAllApi(params)
            .then((res) => {
              this.$message({
                type: "info",
                message: res.data.data + "条指标已驳回",
              });
              this.loading = false;
              if (this.shows == true) {
                this.showH = 1;
              } else {
                this.$emit("ZbndChildren", true);
              }
              this.getDataList();
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "提交失败!",
              });
              this.getDataList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    checkboxSelect(row, rowIndex) {
      if (row.auditStatus == "0") {
        return true;
      } else {
        return false;
      }
    },
    auditStatusFormater(row, column) {
      const auditStatus = row.auditStatus;
      if (auditStatus == 0) {
        return "未提报";
      } else if (auditStatus == 1) {
        return "填报中";
      } else if (auditStatus == 2) {
        return "审核中";
      } else if (auditStatus == 3) {
        return "已经审核";
      } else if (auditStatus == 4) {
        return "审核驳回";
      } else if (auditStatus == 5) {
        return "结果填报中";
      } else if (auditStatus == 5) {
        return "结果填报完成";
      }
    },
  },
};
</script>

<style>
</style>
